<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>微信授权原型</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family:
          -apple-system,
          BlinkMacSystemFont,
          'Helvetica Neue',
          Helvetica,
          Segoe UI,
          Arial,
          Roboto,
          'PingFang SC',
          'miui',
          'Hiragino Sans GB',
          'Microsoft Yahei',
          sans-serif;
        background-color: #f7f8fa;
        color: #323233;
        line-height: 1.5;
      }

      .wechat-auth-page {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
      }

      .logo {
        width: 80px;
        height: 80px;
        background-color: #1989fa;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .app-name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .app-desc {
        font-size: 14px;
        color: #666;
        text-align: center;
        margin-bottom: 30px;
      }

      .auth-card {
        width: 100%;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        padding: 20px;
        margin-bottom: 20px;
      }

      .card-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
      }

      .wechat-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }

      .wechat-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #07c160;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        margin-right: 15px;
      }

      .wechat-details {
        flex: 1;
      }

      .wechat-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .wechat-id {
        font-size: 14px;
        color: #666;
      }

      .auth-list {
        margin-bottom: 20px;
      }

      .auth-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
      }

      .auth-item:last-child {
        border-bottom: none;
      }

      .auth-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 14px;
        color: #666;
      }

      .auth-text {
        flex: 1;
        font-size: 14px;
      }

      .auth-btn {
        width: 100%;
        padding: 12px;
        background: #07c160;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        margin-bottom: 15px;
      }

      .auth-tips {
        font-size: 12px;
        color: #999;
        text-align: center;
        margin-bottom: 20px;
      }

      .other-login {
        text-align: center;
      }

      .other-login p {
        color: #999;
        margin-bottom: 15px;
        position: relative;
        font-size: 14px;
      }

      .other-login p::before,
      .other-login p::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30%;
        height: 1px;
        background: #eee;
      }

      .other-login p::before {
        left: 0;
      }

      .other-login p::after {
        right: 0;
      }

      .other-btn {
        padding: 10px 20px;
        background: #f5f5f5;
        color: #666;
        border: none;
        border-radius: 4px;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div class="wechat-auth-page">
      <div class="logo">L</div>
      <div class="app-name">莱众OA系统</div>
      <div class="app-desc">高效、便捷的企业办公管理平台</div>

      <div class="auth-card">
        <div class="card-title">微信授权登录</div>
        <div class="wechat-info">
          <div class="wechat-avatar">W</div>
          <div class="wechat-details">
            <div class="wechat-name">微信用户</div>
            <div class="wechat-id">微信号：wxid_******</div>
          </div>
        </div>

        <div class="auth-list">
          <div class="auth-item">
            <div class="auth-icon">👤</div>
            <div class="auth-text">获取您的昵称、头像</div>
          </div>
          <div class="auth-item">
            <div class="auth-icon">📱</div>
            <div class="auth-text">获取您的手机号码</div>
          </div>
        </div>

        <button class="auth-btn">确认授权</button>
        <div class="auth-tips">授权后将绑定您的微信账号，下次可直接登录</div>
      </div>

      <div class="other-login">
        <p>其他登录方式</p>
        <button class="other-btn">账号密码登录</button>
      </div>
    </div>
  </body>
</html>
